<template>
  <vxe-modal v-model="dialogVisible" resize show-zoom title="新增" show-footer>
    <el-form
      ref="form"
      :model="modelValue"
      :rules="rules"
      label-width="90px"
      label-position="right"
    >
      <el-form-item prop="type" label="类型">
        <vxe-radio-group v-model.trim="modelValue.type">
          <vxe-radio-button label="module" content="模块" />
          <vxe-radio-button label="page" content="页面" />
          <vxe-radio-button label="button" content="按钮" />
        </vxe-radio-group>
      </el-form-item>
      <el-form-item prop="code" label="权限编码">
        <el-input v-model.trim="modelValue.code" clearable />
      </el-form-item>
      <el-form-item prop="metaTitle" label="菜单名称">
        <el-input v-model.trim="modelValue.metaTitle" clearable />
      </el-form-item>
      <el-form-item prop="icon" label="图标">
        <el-input v-model.trim="modelValue.icon" clearable />
      </el-form-item>
      <el-form-item prop="path" label="路径">
        <el-input v-model.trim="modelValue.path" clearable />
      </el-form-item>
      <el-form-item prop="wxPath" label="小程序路径">
        <el-input v-model.trim="modelValue.wxPath" clearable />
      </el-form-item>
      <el-form-item prop="component" label="组件">
        <el-input v-model.trim="modelValue.component" clearable />
      </el-form-item>
      <el-form-item prop="redirect" label="重定向">
        <el-input v-model.trim="modelValue.redirect" clearable />
      </el-form-item>
      <el-form-item prop="hidden" label="是否隐藏">
        <el-switch v-model="modelValue.hidden" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item prop="seq" label="排序">
        <el-input v-model="modelValue.seq" type="number" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <vxe-button status="primary" content="提交" :disabled="loading" @click="clickSubmitBtn" />
    </template>
  </vxe-modal>
</template>

<script>
import Api from '@/api/upms/routers'
import { VxeModalMixin } from '@/mixins/vxe/VxeModalMixin'
export default {
  name: 'UpmsRoutersCreateDTO',
  mixins: [VxeModalMixin],
  data() {
    return {
      api: Api.create,
      modelValue: {
        code: undefined,
        path: undefined,
        component: undefined,
        redirect: undefined,
        metaTitle: undefined,
        hidden: undefined,
        seq: undefined,
        pid: undefined,
        type: undefined,
        icon: undefined,
        wxPath: undefined
      },
      rules: {
        code: [
          { required: true }
        ],
        pid: [
          { required: true }
        ],
        type: [
          { required: true }
        ],
        metaTitle: [
          { required: true }
        ]
      }
    }
  },
  computed: {
    upCode: {
      get() {
        return this.modelValue.code
      },
      set(val) {
        this.modelValue.code = val.toUpperCase()
      }
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style>

</style>
